<template>
  <div class="aside-box" >
      <ul>
        <li class="menu-item" >
            <router-link to="/home/users" style="color:black">用户管理</router-link>
        </li>
        <li class="menu-item">
            <router-link to="/home/rights" style="color:black">权限管理</router-link>
        </li>
        <li class="menu-item">
            <router-link to="/home/goods" style="color:black">商品管理</router-link>
        </li>
        <li class="menu-item">
            <router-link to="/home/orders" style="color:black">订单管理</router-link>
        </li>
        <li class="menu-item">
            <router-link to="/home/reset" style="color:black">系统设置</router-link>
        </li>
      </ul>

  </div>
</template>

<script>
export default {
    name:'MyAside'
}
</script>

<style lang="less" scoped>
    ul{
        list-style: none;
        padding: 0;
    }
    ul li{
       line-height: 50px;
        font-weight: bold;
        font-size: 14px;
        padding-left: 50px;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    }
    .aside-box{
        width: 250px;
        height: 100%;
        border-right: 1px solid #eaeaea;        
    .menu-item{
        height: 50px;
        &:hover{
            cursor: pointer;
            background-color: #efefef;
        }   
    }
    }// 设置路由高亮效果
.router-link-active {
  background-color: #efefef;
  box-sizing: border-box;
  position: relative;
  // 伪元素实现路由高亮效果
  &::before {
    content: ' ';
    display: block;
    width: 4px;
    height: 130%;
    position: absolute;
    left: -50px;
    top: 0;
    background-color: #42b983;
  }
}
</style>